import _ from "lodash";
import React from "react";
import { Button } from "antd";
import { WeaDialog, WeaLocaleProvider } from "ecCom";
import { WeaForm } from 'comsMobx';
import condition from "./condition";
import { observer, inject } from "mobx-react";
import { displayTypes, fillinTypes } from "../../../constants/app";
const getLabel = WeaLocaleProvider.getLabel;

@inject('edcAppFormStore')
@observer
export default class NewOrEditDialog extends React.Component {
  constructor(props) {
    super();

    this.state = {
      form: new WeaForm(),
      date: '', // 触发表单验证渲染,
      isEdit: !!props.app.name,
      loading: false
    };
    this.store = props.edcAppFormStore;
  }

  componentWillMount() {
    let { app, fillinType, myGroups, notMine, selectedGroupType, createType } = this.props;
    const { form, isEdit } = this.state;

    form.setCondition(condition(app, myGroups, notMine, selectedGroupType));
    if (!isEdit) { // 编辑状态下 不显示(显示类型, 填报类型)
      if (createType.indexOf('EXCEL') > -1 && (fillinType == fillinTypes.ALL || fillinType == fillinTypes.MULTI)) {
        this.store.initForm(form, { displayType: displayTypes.EXCEL, fillinType: fillinTypes.MULTI }, createType);
        form.updateFields({
          fillinType: { value: fillinTypes.MULTI },
          displayType: { value: displayTypes.EXCEL }
        
        });
      } else {
        this.store.initForm(form, { displayType: displayTypes.FORM, fillinType: fillinTypes.FREE }, createType);
        form.updateFields({
          fillinType: { value: fillinTypes.FREE },
          displayType: { value: displayTypes.FORM }
        })
      }
    }
  }

  componentWillReceiveProps(nextProps) {
    const { fillinType, createType } = nextProps;
    const { form, isEdit } = this.state;
    
    if (createType) {
      if (!isEdit) { // 编辑状态下 不显示(显示类型, 填报类型)
        if (createType.indexOf('EXCEL') > -1 && (fillinType == fillinTypes.ALL || fillinType == fillinTypes.MULTI)) {
          this.store.initForm(form, { displayType: displayTypes.EXCEL, fillinType: fillinTypes.MULTI }, createType);
          form.updateFields({
            fillinType: { value: fillinTypes.MULTI },
            displayType: { value: displayTypes.EXCEL }
          
          });
        } else {
          this.store.initForm(form, { displayType: displayTypes.FORM, fillinType: fillinTypes.FREE }, createType);
          form.updateFields({
            fillinType: { value: fillinTypes.FREE },
            displayType: { value: displayTypes.FORM }
          })
        }
      }
    }
}

  onOk() {
    const { app, onOk } = this.props;
    const { form, isEdit, loading } = this.state;

    if (loading) return;

    form.validateForm().then(f => {
      if (!f.isValid) {
        f.showErrors();
        this.setState({ date: new Date() });
        return;
      }

      const formdata = form.getFormParams();
      let hasNotModify = false;

      if (isEdit) {
        const { name, description } = app;

        hasNotModify = _.isEqual({ name, description }, formdata);
        formdata.id = app.id;
      } else {
        hasNotModify = _.isEqual(app, formdata);
      }

      this.setState({ loading: true });
      onOk(formdata, hasNotModify);
    });
  }
  onChange = (values) => {
    const { displayType: { value } = {} } = values;
    const { form } = this.state;
    if (!value) {
      return;
    }
    if (value === displayTypes.FORM) {
      this.store.updateForm(form, { displayType: displayTypes.FORM, fillinType: fillinTypes.FREE });
      form.updateFields({
        fillinType: { value: fillinTypes.FREE }
      });
    } else if (value === displayTypes.EXCEL) {
      this.store.updateForm(form, { displayType: displayTypes.EXCEL, fillinType: fillinTypes.MULTI });
      form.updateFields({
        fillinType: { value: fillinTypes.MULTI }
      })
    }
  }
  render() {
    const { form, loading, isEdit } = this.state;
    const { app, visible, onCancel, canCreated, createType } = this.props;

    const buttons = [
      ((isEdit || canCreated) && <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@i4xd8q@sure`} type='primary' icon={loading && 'loading'} onClick={this.onOk.bind(this)}>{getLabel('506028', '确定')}</Button>),
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@2vg2fw@cancel`} type='ghost' onClick={onCancel}>{getLabel(31129, '取消')}</Button>
    ];
    const content = (isEdit || canCreated) ? form.render({ needTigger: false, col: 1 }, { onChange: this.onChange.bind(this) }) :
      <div style={{ height: 180, textAlign: "center", color: "red" }}><span style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, margin: 'auto', height: 60 }}>{getLabel('512022', '你所创建的应用已达到上限,无法再创建，请联系管理员！')}</span></div>;
    return (
      <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@zf1uan`}
        title={isEdit ? `${getLabel('82178', '编辑应用') + ' - ' + app.name}` : getLabel('502750', '新建填报应用')}
        style={{ height: 'auto' }}
        icon={"icon-coms02-Data-center"}
        iconBgcolor="#1a57a0"
        visible={visible}
        buttons={buttons}
        onCancel={onCancel}
      >
        {/* {form.render({ needTigger: false, col: 1 }, { onChange: this.onChange.bind(this) })} */}
        {content}
      </WeaDialog>
    );
  }
}

NewOrEditDialog.defaultProps = {
  app: {},
  visible: false,
  onOk: () => { },
  onCancel: () => { }
};